<template>
  <div>
    <table border="1">
      <tr>
        <td>名称</td>
        <td>价格</td>
        <td>图片</td>
        <td>评论</td>
        <td>操作</td>
      </tr>
      <tr v-for="(o,index) in orders" :key="o.id">
        <td>{{o.goods.title}}</td>
        <td>{{o.goods.price}}</td>
        <td><img :src="'http://127.0.0.1:8000/'+o.goods.img" alt=""></td>

        <td><input type="text" placeholder="请输入评论" v-model="o.comment" :disabled="o.is_comment"></td>
        <td>
          <button v-if="o.is_comment">已评论</button>
          <button v-else @click="comment(index)">评论</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        orders: [], // 存所有的订单信息
      }
    },
    created() {
      this.get_orders()
    },
    methods: {
      get_orders() {
        this.axios.get('http://127.0.0.1:8000/order/').then(res => {
          // alert(res.data)
          this.orders = res.data.data
        }).catch(err => {
          alert(err)
        })
      },
      comment(index) {
        this.axios.put('http://127.0.0.1:8000/order/', {
            oid: this.orders[index].id,
            content: this.orders[index].comment
          }
        ).then(res => {
          alert(res.data.msg)
          this.$router.go(0)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style>
</style>
